<template>
  <!-- 弹出消息框 -->
  <el-dialog v-model="centerDialogVisible" title="更换头像" width="30%" center>
    <span><upload/></span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 头像信息 -->
  <div class="demo-basic--circle">
    <div class="block">
      <el-avatar :size="100" :src="circleUrl" @click="centerDialogVisible = true"></el-avatar>
    </div>
  </div>

  <!-- 详细信息 -->
  <el-descriptions
      class="margin-top"
      :column="1"
      border>
    <el-descriptions-item>
      <template #label>
        <el-icon>
          <user/>
        </el-icon>
        Username
      </template>
      {{ profileInfo.Username }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <el-icon>
          <iphone/>
        </el-icon>
        手机号码
      </template>
      {{ profileInfo.PhoneNumber }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <el-icon>
          <iphone/>
        </el-icon>
        Email
      </template>
      {{ profileInfo.Email }}
    </el-descriptions-item>
  </el-descriptions>


  <el-button class="cancel" @click="cancel" type="danger" plain>注销账户</el-button>
</template>

<script>
import {onBeforeMount, onBeforeUpdate, reactive, ref, toRefs} from "vue";
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'

import {ElMessageBox, ElMessage} from 'element-plus'
import {
  User,
  Iphone,
  Location,
  Tickets,
  OfficeBuilding
} from '@element-plus/icons-vue'

import Upload from "@/components/upload/Upload.vue";
import {DELETE} from "@/api/index.ts";
import {GET} from "../../../api";


export default {
  name: "ProfileInfo",
  components: {
    User,
    Iphone,
    Location,
    Tickets,
    OfficeBuilding,
    Upload
  },
  setup() {
    const store = useStore()
    const router = useRouter()

    const profileInfo = ref(JSON.parse(localStorage.getItem("user")));

    onBeforeMount(() => {
      reload()
    })
    onBeforeUpdate(() => {
      reload()
    })

    const reload = () => {
      console.log(profileInfo.value)
      GET("/User/GetUser", {
        params: {
          username: profileInfo.value.Username
        }
      }).then(res => {
        console.log(profileInfo)
        profileInfo.value = res.data
        localStorage.setItem("user", JSON.stringify(res.data))
      })
    }

    const state = reactive({
      circleUrl: profileInfo?.value?.headIcon
    })

    const cancel = () => {
      console.log("注销账户")
      ElMessageBox.confirm(
          '将会注销该账户，确定注销吗?',
          'Warning',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        DELETE(`/user/delete/${profileInfo.userId}`).then(res => {
          if (res.status === 200) {
            ElMessage.success("注销账户成功")
            router.push("/login")
          }
        }).catch(err => {
          console.log(err)
          ElMessage.error("出错啦")
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消操作',
        })
      })
    }

    return {
      ...toRefs(state),
      profileInfo,
      centerDialogVisible: ref(false),
      cancel
    }
  },
}
</script>

<style lang="scss" scoped>
.demo-basic--circle {
  text-align: center;
}

.cancel {
  width: 100%;
}

</style>